<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img src="../assets/order_center/shangs.png">
      </div>
      <span>填写申请表</span>
      <div class="right">
      </div>
    </div>
		<div class="n"></div>
		<div class="biao">
			<div class="list">
				<div class="title">
					<span>结算账户信息</span>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>法人姓名</span>
					</div>
					<input type="text" placeholder="请输入法人姓名"  v-model="legalperson_name">
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>法人性别</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right"  v-model="legalperson_sex">
												<option value="男">男</option>
												<option value="女">女</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>
				<!-- <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>证件国别 / 地区</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right"  v-model="legalperson_country" >
												<option value="中国大陆">中国大陆</option>
												<option value="中国香港特别行政区">中国香港特别行政区</option>
												<option value="中国澳门特别行政区">中国澳门特别行政区</option>
												<option value="中国台湾特别行政区">中国台湾特别行政区</option>
												<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div> -->
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>证件类型</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right"  v-model="legalperson_type">
												<option value="居民身份证">居民身份证</option>
												<option value="驾驶证">驾驶证</option>
												<option value="护照">护照</option>
												<option value="军人证">军人证</option>
												<option value="港澳往来通行证">港澳往来通行证</option>
												<option value="其他3">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div>
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>法人证件号码</span>
					</div>
					<input type="text" placeholder="请输入法人证件号码"  v-model="legalperson_num">
				</div>
				<!-- <div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>法人证件有效期</span>
					</div>
					<div class="lc">
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="date" v-model="legalperson_begin" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
						<div class="inf">
							<yd-cell-group>
								<yd-cell-item arrow>
									<span slot="left"></span>
									<yd-datetime type="date" v-model="legalperson_end" slot="right"></yd-datetime>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div> -->
				<div class="bar">
					<div class="name">
						<img src="../assets/Table_for/hua.png">
						<span>法人联系电话</span>
					</div>
					<input type="text" placeholder="请输入法人联系电话"  v-model="legalperson_phone">
				</div>
				<div class="bar">
					<div class="name">
						<span>法人联系邮箱</span>
					</div>
					<input type="text" placeholder="请输入法人联系邮箱"  v-model="legalperson_email">
				</div>
				<!-- <div class="bar">
					<div class="name">
						<span>法人职业</span>
					</div>
					<div class="lc">
						<div class="inf" style="width:100%;">
							<yd-cell-group>
								<yd-cell-item arrow type="label">
										<select slot="right" v-model="legalperson_job">
											<option value="农、林、牧、渔业">农、林、牧、渔业</option>
											<option value="采矿业">采矿业</option>
											<option value="服务行业">服务行业</option>
											<option value="制造业">制造业</option>
											<option value="电力、热力、燃气及水生产和供应业">电力、热力、燃气及水生产和供应业</option>
											<option value="建筑业">建筑业</option>
											<option value="批发和零售业">批发和零售业</option>
											<option value="交通运输、仓储和邮政业">交通运输、仓储和邮政业</option>
											<option value="住宿和餐饮业">住宿和餐饮业</option>
											<option value="信息传输、软件和信息技术服务业">信息传输、软件和信息技术服务业</option>
											<option value="金融业">金融业</option>
											<option value="房地产业">房地产业</option>
											<option value="租赁和商务服务业">租赁和商务服务业</option>
											<option value="科学研究和技术服务业">科学研究和技术服务业</option>
											<option value="水利、环境和公共设施管理业">水利、环境和公共设施管理业</option>
											<option value="居民服务、修理和其他服务业">居民服务、修理和其他服务业</option>
											<option value="教育">教育</option>
											<option value="卫生和社会工">卫生和社会工</option>
											<option value="其他">其他</option>
										</select>
								</yd-cell-item>
							</yd-cell-group>
						</div>
					</div>
				</div> -->
				<div class="bar">
					<div class="name">
						<span>法人住址</span>
					</div>
					<input type="text" placeholder="请输入法人住址" v-model="legalperson_addre">
				</div>
			</div>
		</div>
   	<div class="btn">
			<button class="next" @click="aptitudeClick()">下一步</button>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
Vue.component(CitySelect.name, CitySelect);
import District from "ydui-district/dist/jd_province_city_area_id";

import { CellGroup, CellItem } from "vue-ydui/dist/lib.rem/cell";
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);

import { DateTime } from "vue-ydui/dist/lib.rem/datetime";
Vue.component(DateTime.name, DateTime);
export default {
  name: "Table_for",
  data() {
    return {
      legalperson_name: "",
      legalperson_sex: "",
      legalperson_type: "",
      // legalperson_country: "",
      legalperson_num: "",
      // legalperson_begin: "", //法人证件有效开始时间
      // legalperson_end: "", //法人证件有效结束时间
      legalperson_phone: "",
      legalperson_email: "",
      legalperson_job: "",
      legalperson_addre: ""
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    aptitudeClick() {
      //填写信息不能为空
      if (!this.legalperson_name) {
        this.$dialog.toast({ mes: "请输入法人姓名" });
        return;
      }
      if (!this.legalperson_sex) {
        this.$dialog.toast({ mes: "请选择法人性别" });
        return;
      }
      if (!this.legalperson_type) {
        this.$dialog.toast({ mes: "请选择证件地区" });
        return;
      }
      if (!this.legalperson_type) {
        this.$dialog.toast({ mes: "请选择证件类型" });
        return;
      }
      if (!this.legalperson_num) {
        this.$dialog.toast({ mes: "请输入法人证件号码" });
        return;
      }
      // if (!this.legalperson_begin) {
      //   this.$dialog.toast({ mes: "请选择法人证件有效期开始时间" });
      //   return;
      // }
      // if (!this.legalperson_end) {
      //   this.$dialog.toast({ mes: "请选择法人证件有效期结束时间" });
      //   return;
      // }
      if (!this.legalperson_phone) {
        this.$dialog.toast({ mes: "请输入法人联系电话" });
        return;
      }
      if (!this.legalperson_email) {
        this.$dialog.toast({ mes: "请输入法人联系邮箱" });
        return;
      }
      // if (!this.legalperson_job) {
      //   this.$dialog.toast({ mes: "请选择法人职业" });
      //   return;
      // }
      if (!this.legalperson_addre) {
        this.$dialog.toast({ mes: "请输入法人地址" });
        return;
      }
      //数据保存的本地
      localStorage.setItem("legalperson_name", this.legalperson_name);
      localStorage.setItem("legalperson_sex", this.legalperson_sex);
      localStorage.setItem("legalperson_type", this.legalperson_type);
      // localStorage.setItem("legalperson_country", this.legalperson_country);
      localStorage.setItem("legalperson_num", this.legalperson_num);
      // localStorage.setItem("legalperson_begin", this.legalperson_begin);
      // localStorage.setItem("legalperson_end", this.legalperson_end);
      localStorage.setItem("legalperson_phone", this.legalperson_phone);
      localStorage.setItem("legalperson_email", this.legalperson_email);
      // localStorage.setItem("legalperson_job", this.legalperson_job);
      localStorage.setItem("legalperson_addre", this.legalperson_addre);
      this.$router.push("aptitude");
    }
  },
  created() {
    document.title = "填写申请表";
  }
};
</script>


<style scoped>
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
  margin-bottom: 0.03rem;
  position: fixed;
  z-index: 999;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.n {
  height: 0.92rem;
}
.biao {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.list {
  width: 90%;
  background: #fff;
  border-radius: 20px;
  padding: 0.3rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list .title span {
  font-size: 0.32rem;
  color: #333;
}
.list .bar {
  width: 100%;
  height: 1.6rem;
  display: flex;
  flex-direction: column;
}
.list .bar .name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  align-items: center;
}
.list .bar .name span {
  font-size: 0.28rem;
  margin-left: 0.1rem;
}
.list .bar .name img {
  width: 0.1rem;
  height: 0.1rem;
}
.list .bar input {
  border: 1px solid #949494;
  height: 0.8rem;
  border-radius: 5px;
  text-indent: .1rem;
}
.list .bar .adr {
  height: 0.8rem;
  border-radius: 5px;
}
.list .bar .lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.list .bar .adr input {
  border: none;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
.btn .next {
  width: 90%;
  height: 0.9rem;
  background: #e63f3f;
  border: none;
  border-radius: 10px;
  font-size: 0.32rem;
  color: #fff;
}
.txt::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.05rem;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.28rem;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  font-size: 0.27rem;
  color: #abaeb1;
  padding-left: 0.25rem;
}
</style>
<style>
.adr .yd-cell {
  border: 1px solid #949494;
  height: 0.8rem !important;
  border-radius: 5px;
}
.adr .yd-cell-right {
  height: 0.8rem;
  min-height: 0;
}
.yd-cell:after {
  height: 0;
}
.lc {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.lc .inf {
  height: 0.8rem !important;
  width: 48.2%;
  border: 1px solid #949494;
  border-radius: 5px;
}
.yd-cell-right {
  min-height: 0;
}
.lc .inf .yd-cell {
  height: 0.6rem !important;
  margin-top: 0.03rem;
  overflow: hidden;
}
.lc .inf .yd-cell-right {
  height: 0.7rem !important;
}
.lc .inf .yd-cell-right select {
  height: 0.5rem !important;
}
.lc .inf .yd-cell-item {
  width: 90%;
  margin: 0 auto;
  height: 0.7rem;
}
</style>



